<template>
    <div class="singer-container">
        <div class="singer-wrap">

            <div class="filtrate-wrap">

                <ul class="area-filter">
                    <span>{{screenMenu[0].name}}:</span>
                     <li v-for="item in screenMenu[0].options" :key="item.id" @click="checkFilterate('area',item.key)" :class="[item.key == filterateInfo.area ?  'active' : '']">{{item.name}}</li>
                </ul>
                <ul class="gender-filter">
                    <span>{{screenMenu[1].name}}:</span>
                    <li v-for="item in screenMenu[1].options" :key="item.id" @click="checkFilterate('type',item.key)" :class="[item.key == filterateInfo.type ?  'active' : '']">{{item.name}}</li>
                </ul>
                <ul class="word-filter">
                    
                    <li v-for="item in screenMenu[2].options" :key="item.id" @click="checkFilterate('initial',item.key)" :class="[item.key == filterateInfo.initial ?  'active' : '']">{{item.name}}</li>
                </ul>

            </div>

            <div class="singer-card-container">
                
                <singer-card v-for="item in singer" :key="item.id" :singerInfo="item" @click="router.push({
                    name: 'SingerDetail',
                    params: {id:item.id}
                })"></singer-card>


            </div>

        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent,reactive,ref } from 'vue'
import {screenMenu} from '../assets/data/singer'
import SingerCard from '../components/Singer/Singer-Card.vue'
import {HttpManager} from '../api/index'
import {useRouter} from 'vue-router'
export default defineComponent({

    components:{SingerCard},
    setup () {
        
        const router = useRouter();

        const filterateInfo = reactive({
            area:screenMenu[0].options[0].key,
            type:screenMenu[1].options[0].key,
            initial:screenMenu[2].options[0].key,
        })

        const singer = ref([]);

        const checkFilterate = (option,key)=>{

            filterateInfo[option] = key;
            getSingerList()

        }

        const getSingerList = () => {
            console.log('filterateInfo',filterateInfo.type);
            
            HttpManager.getSingerList(filterateInfo).then((res:any) => {
                console.log("获取到的歌手列表",res);
                singer.value = res.artists
            })
        }

        

        getSingerList();
        return {

            screenMenu,
            filterateInfo,
            HttpManager,
            singer,
            router,
            checkFilterate,
            getSingerList
 
        }
    }
})
</script>
 
<style lang = "scss" scoped>
    @import "../assets/css/singer.scss"
</style>